<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 
        定位 position 偏移位置 通过left right top bottom进行位置偏移的
             position:static 默认值 不定位
             position:relative; 相对定位
                    1，相对自身的位置（原本）进行偏移，偏移之后的距离会被保留，通过left
                    right,top bottom进行位置偏移的，可以取负值
                    2，不脱离文档流，占位的

            什么情况下用相对定位？
                1, 如果想让标签自己走，不影响其他标签
                2，给绝对定位找参照物（最多）

        position:absolute; 绝对定位  通过left right,top bottom进行位置偏移的，可以取负值
            1，默认的参照物是，浏览器窗口(html根元素)的第一屏
                如果参考物变成父级，那么父级必须要有定位属性（建议加相对定位） 父相子绝
                绝对定位的参照物是一层一层往上找的

            2，脱离文档流，不占位的

        什么情况下会用到绝对定位
            1，一般用在二级菜单
            2，不占位

    固定定位  通过left right,top bottom进行位置偏移的，可以取负值
         参照物：浏览器的"可视"区域(不管屏幕有没有滚动条，我都固定在你调整的位置那里)
         脱离文档流，不占位的

     -->
<style>
    body{
        height:3000px;
    }
    .box{
        width:100px; height:50px; background: orangered;
        color: #fff;
        text-align: center;
        line-height: 50px;
        font-weight: bold;
        font-size: 20px;
        position: fixed;
        /* 添加了固定定位 */
        right:50px;
        bottom:0;
        /* margin-right:50px; */
    }
    /* 想让一个容器在浏览器的范围内水平垂直居中 */
</style>
</head>
<body>
    <div class="box">返回顶部</div>
</body>
</html>